<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/detail.css" />
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<script src="js/animateBak.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	
	<span style="position:absolute; display: none;" class="shadow" ></span>
	<div class="alert" style="display: none;">
		<div class="alert-top">
			<h2>分享后预计可赚取佣金<span>￥24</span></h2>
			<p>好友通过你分享的页面成功购买后，你可以获得对应的佣金。佣金可在“我的--推广中心”里查看</p>
		</div>
		<div class="alert-bottom">
			<a href="">
				<em class="iconfont icon-shengchenghaibao"></em>
				<span>生成海报</span>
			</a>
			<a href="">
				<em class="iconfont icon-weixin1" style="background: #3bb136;"></em>
				<span>微信好友</span>
			</a>
			<a href="">
				<em class="iconfont icon-iconfontzhizuobiaozhunbduan36"style="background: #e1cd5c;"></em>
				<span>朋友圈</span>
			</a>
			<a href="">
				<em class="iconfont icon-xinlangweibo"style="background: #ff515a;"></em>
				<span>新浪微博</span>
			</a>
			<a href="">
				<em class="iconfont icon-qq"style="background: #4cafea;"></em>
				<span>qq好友</span>
			</a>
		</div>
	
			<button type="button" class="cancel">取消</button>
		
		
		
	</div>
		<div class="con">
			<header>
				<img src="img/tou.gif">
				<p><a href="index-rec.html" class="iconfont icon-left"> <a><span>素描人物-快速掌握人物创作</span><a href="javascript:;" class="iconfont icon-tuichu"></a></p>
			</header>
			<main>
				<figure>
					<img src="img/ren.gif">
					<figcaption>
						<p><span>素描人物-快速掌握人物创作</span><em class="iconfont icon-03"></em><span>收藏</span></p>
						<p><em>素描</em><em>人物</em></p>
						<p> <span>更新时间：2018-06-21</span> <span>299人已购</span></p>
					</figcaption>
				</figure>
				<div class="tabs">
					<a href="#" class="active">课程介绍</a>
					<a href="#">课程列表</a>
					<a href="#">课程须知</a>
				</div>
				<div id="tabs-container" class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="detail-con1">
								<div class="detail-con-wrap">
									<img src="img/nan.gif">
								</div>
								<div class="text">
									<p>本课程为线上优质课程分享。</p>
									<p>授课形式主要以语言.文字.和图片为主，</p>
									<p>部分课程根据授课内容配有相关视频</p>
									<p>意在综合.立体的为朋友们呈现出最优质的艺术课程分享状态</p>
								</div>

							</div>
						</div>
						<div class="swiper-slide">
							<div class="detail-con2">
								<p class="gonggao">公告:我是公告</p>

								<p><em></em><a href='javascript:;'>排序</a></p>
								<div class="list-con">
									<h2> <em></em><span>第一期</span> <span>免费试听</span><span>2018-06-18</span></h2>
									<figure>
										<div class="list-wrap">
											<img src="img/nan.gif">
										</div>
										<figcaption>
											<h3>第一节 走进素描人物绘</h3>
											<p>工具介绍以及举出技法的讲解练习</p>
										</figcaption>
									</figure>


								</div>

								<div class="list-con">
									<h2> <em></em><span>第二期</span> <span>免费试听</span><span>2018-06-18</span></h2>
									<figure>
										<div class="list-wrap">
											<img src="img/nan.gif">
										</div>
										<figcaption>
											<h3>第一节 走进素描人物绘</h3>
											<p>工具介绍以及举出技法的讲解练习</p>
										</figcaption>
									</figure>


								</div>

								<div class="list-con">
									<h2> <em></em><span>第三期</span> <span>免费试听</span><span>2018-06-18</span></h2>
									<figure>
										<div class="list-wrap">
											<img src="img/nan.gif">
										</div>
										<figcaption>
											<h3>第一节 走进素描人物绘</h3>
											<p>工具介绍以及举出技法的讲解练习</p>
										</figcaption>
									</figure>


								</div>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="detail-con3">
								<div class="tea-intr">
									<p>导师介绍</p>
									<dl>
										<dd class="tea-wrap">

											<img src="img/renwu1.gif" alt="">

										</dd>
										<dt>
											<h2>于博洋</h2>
											<p>艺伙金牌导师</p>
											<p>中国画院专职画师</p>
											<p>中国笔墨丹青院聘画师</p>
										</dt>
									</dl>





									<p><a href="">【 点击加载更多 】</a></p>
								</div>
								<div class="new-lesson">
									<p><span>新更课程</span> <span>2018-06-21</span></p>
									<dl>
										<dd class="new-lesson-wrap">
											<img src="img/mali.gif">
										</dd>
										<dt>
											<h3>第四节 素描人物整体刻画</h3>
											<p>掌握基本的任务比例，并学会如何起行并深入刻画人物(总共102张图文超详细解析)</p>
										</dt>
									</dl>
								</div>

								<div class="baoming">
									<p>已有299人报名</p>
									<ul>
										<li>
											<img src="">
										</li>
										<li>
											<img src="">
										</li>
										<li>
											<img src="">
										</li>
										<li>
											<img src="">
										</li>
										<li>
											<img src="">
										</li>
										<li>
											<img src="">
										</li>
										<li>
											<img src="">
										</li>
										<li>
											<img src="">
										</li>
										<li>
											<img src="">
										</li>
									</ul>
								</div>

								<div class="lesson-text">
									<h2>课程须知</h2>
									<p>1.本课程为线上艺术分享课程，可随时随地进入课堂</p>
									<p>2.课程在购买后可用就反复使用</p>
									<p>3.课程内部有讨论区，供学院提问交流</p>
									<p>4.本产品可在微信，艺伙app，微博等多平台使用</p>
									<p>5.课程内的教学视频虽不会产生很大流量，依然建议在WI-FI环境下观看</p>
									<p>6.本产品购买后无法退还，请您理解</p>
									<p>7.【于博洋】苏表彩铅交流群，添加客服微信好：V798699</p>
									<a href="">
										<p><span>免费试听</span><em class="iconfont icon-yousanjiaoxing"></em></p>
									</a>
								</div>


							</div>
						</div>
					</div>
				</div>
			</main>
			<footer>
				<a href="">￥166.00报名</a>
				<a href="">￥144.00</a>

			</footer>
		</div>
		<script type="text/javascript">
			
			window.onload = function() {
				
				var tabsSwiper = new Swiper('#tabs-container', {
					speed: 500,
					on: {
						slideChangeTransitionStart: function() {
							$(".tabs .active").removeClass('active');
							$(".tabs a").eq(this.activeIndex).addClass('active');
						}
					}
				})
				$(".tabs a").on('click', function(e) {
					e.preventDefault()
					$(".tabs .active").removeClass('active')
					$(this).addClass('active')
					tabsSwiper.slideTo($(this).index())

				})
				
				
				let btn=document.querySelector('.icon-tuichu')
				let shadow=document.querySelector('.shadow')
				let alert = document.querySelector('.alert')
				let cancel= document.querySelector('.cancel')
				console.log(shadow)
				btn.onclick=function(){
					
					shadow.style.display='block'
					alert.style.display='block'
					animate(alert,{bottom:0})
					cancel.onclick=function(){
						shadow.style.display='none'
						alert.style.display='none'
						animate(alert,{bottom:-400})
					}
					document.onmousedown=function(){
						shadow.style.display='none'
						alert.style.display='none'
						animate(alert,{bottom:-400})
					}
				}
			}
			
			
			
			
		</script>
	</body>
</html>
